<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="25%"
      destroy-on-close
      center
      @close="dialogClose">
    <el-form
        ref="ruleFormRef"
        label-position="top"
        label-width="100px"
        :model="formLabelAlign"
        :rules="rules"
    >

      <el-form-item label="区域类型">
        <el-radio-group v-model="radio">
          <el-radio :label="1" :disabled="shouRadio">省</el-radio>
          <el-radio :label="2" :disabled="shouRadio">市</el-radio>
          <el-radio :label="3" :disabled="shouRadio">区</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="省" prop="provinceId" v-if="radio>1">
        <el-select v-model="formLabelAlign.provinceId" placeholder="请选择省"
                   @change="selCityOption('cityList',formLabelAlign.provinceId)">
          <el-option v-for="item in  provinceList" :label="item.label" :value="item.value"
                     :key="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="cityId" v-if="radio>2">
        <el-select v-model="formLabelAlign.cityId" placeholder="请选择市">
          <el-option v-for="item in cityList" :label="item.label" :value="item.value"
                     :key="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域名称" prop="districtName">
        <el-input v-model="formLabelAlign.districtName"/>
      </el-form-item>
    </el-form>
    <div class="bottomButton">
      <el-button class="affirm" @click="resetForm" style="width: 47.5%;height: 100%;">确认</el-button>
      <el-button class="cancel" @click="centerDialogVisible = false" style="width: 47.5%;height: 100%;">取消</el-button>

    </div>
  </el-dialog>

</template>

<script>
let me;
export default {
  name: "EditDistrictDialog",
  watch: {
    formLabelAlign(val) {
      this.selCityOption("cityList", val.provinceId);
      this.formLabelAlign.cityId = val.cityId;
    }
  },
  data() {
    return {
      shouRadio: false,
      formTitle: '',
      radio: 1,
      rules: {
        districtName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        cityId: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        provinceId: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      },
      formLabelAlign: {
        districtName: '',
        cityId: '',
        provinceId: '',
      },
      cityList: [],
      provinceList: [],
      districtList: [],
      centerDialogVisible: false
    }
  },
  methods: {
    showDialog(row, radio, boolean, provinceId, cityId) {
      me = this;
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.selCityOption("provinceList", '');
        this.formTitle = '新增信息';
        me.formLabelAlign.actionType = 'districtAdd';
        if (row) {
          me.radio = radio;
          me.shouRadio = boolean;
          me.formLabelAlign = JSON.parse(JSON.stringify(row));
          this.formTitle = '编辑信息';
          me.formLabelAlign.actionType = 'districtUpdate';
          me.formLabelAlign.provinceId = provinceId;
          me.formLabelAlign.cityId = cityId;
        }
      });
    },
    async selCityOption(name, id) {
      let response = await this.$asyncPost("district", {
        actionType: "districtDownDropList",
        parentId: id
      });
      if (response.success) {
        me[name] = response.downDropList;
        me.formLabelAlign.cityId = '';
      } else {
        this.$message.error(response.message);
      }
    },
    resetForm() {
      me.$refs.ruleFormRef.validate(async (valid, fields) => {
        if (valid) {
          if (me.radio == 1) {
            me.formLabelAlign.parentId = 0;
          } else if (me.radio == 2) {
            me.formLabelAlign.parentId = me.formLabelAlign.provinceId;
          } else if (me.radio == 3) {
            me.formLabelAlign.parentId = me.formLabelAlign.cityId;
          }
          let response = await me.$asyncPost("district", me.formLabelAlign);
          if (response.success) {
            me.$message.success('添加成功');
            me.centerDialogVisible = false;
            me.$parent.selTableData();
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    dialogClose() {
      this.$refs.ruleFormRef.resetFields();//关闭的时候一定要清空之前的form表单已填写的数据！！！！！
      this.shouRadio = false;
      this.radio = 1
    }
  }
}
</script>

<style scoped lang="scss">

</style>